<!--
* description: 缺件结案
* author: xuliwen
* createdDate: 2021-01-29
-->
<template>
  <div id="twoTable" class="app-container app-container-table">
    <el-main class="leftMail MailOne">
      <one-table-template
        :ref="leftTable.tableRef"
        :key="leftTable.oneTableKey"
        :dynamic-buttons="leftTable.tableButtons"
        :dynamic-components="leftTable.tableComponents"
        :dynamic-api-config="leftTable.apiConfig"
        :dynamic-table-cols="leftTable.tableCols"
        :dynamic-form-fields="leftTable.formField"
        :dynamic-is-show-select="false"
        :dynamic-is-init-table="true"
        :callback-obj="leftTable.callbackObj"
        :dynamic-parent-table-ref="leftTable.tableRef"
        :dynamic-pager-count="5"
      />
    </el-main>
    <el-main class="rightElmain MailOne">
      <one-table-template
        ref="rightTableRef"
        :key="rightTable.oneTableKey"
        :dynamic-buttons="rightTable.tableButtons"
        :dynamic-components="rightTable.tableComponents"
        :dynamic-api-config="rightTable.apiConfig"
        :dynamic-table-cols="rightTable.tableCols"
        :dynamic-form-fields="rightTable.formField"
        :dynamic-un-form-fields="rightTable.unFormField"
        :dynamic-is-show-select="true"
        :dynamic-is-init-table="false"
        :callback-obj="rightTable.callbackObj"
        :dynamic-parent-table-ref="rightTable.tableRef"
        :dynamic-pager-count="5"
        :num-list="numList"
      >

        <template #assignQty="scope">
          <el-input
            v-model="scope.row['assignQty']"
            placeholder="输入领用数量"
            @input="numChange($event, scope.row, scope.col)"
          />
        </template>
      </one-table-template>
    </el-main>
  </div>
</template>
<script>
import { moreTableWithViewTemplateMixins } from '@/components/mixins/moreTableWithViewTemplateMixins'
// import { orgApis } from '@/api/apiList/org'
import OneTableTemplate from '@/components/templates/oneTable'
import Vue from 'vue'
import { orgApis } from '@/api/pabasicdataapi'

export default {
  name: 'ShortageCaseClosed',
  components: {
    OneTableTemplate
  },
  // 组件混入对象
  mixins: [moreTableWithViewTemplateMixins],
  // 阻塞路由预加载网格中组件的数据
  beforeRouteEnter(to, from, next) {
    Vue.prototype.$ConfigCache.CacheConfig.initData(['lookupMamagerLeft', 'lookupMamagerRight'], function() {
      next()
    })
  },
  data() {
    null
    // editRowData: {}
    // 左网格pageCode
    const leftPageCode = 'lookupMamagerLeft'
    // 右网格pageCode
    const rightPageCode = 'lookupMamagerRight'
    // 绑定事件配置化事件
    // this.$ConfigCache.CacheConfig.bindEvent(this, [leftPageCode, rightPageCode])
    return {
      // 定义watch对象（用于组件联动监控）
      watchObj: [
        { formFieldName: 'leftTable.formField', tableComponentsName: 'leftTable.tableComponents', tableRef: 'leftTableRef' },
        { formFieldName: 'rightTable.formField', tableComponentsName: 'rightTable.tableComponents', tableRef: 'rightTableRef' }
      ],
      // 左网格
      leftTable: {
        // 网格Ref
        tableRef: 'leftTableRef',
        // 网格Key
        oneTableKey: 'leftTable',
        // 网格查询API配置对象
        apiConfig: orgApis.shortageCaseClosedLeftQuery,
        // 动态组件-按钮
        tableButtons: [
          {
            compKey: 'btnKey1',
            type: 'primary',
            size: 'small',
            clickEvent: () => this.query(this.leftTable.tableRef),
            text: '查询',
            name: 'search', // 按钮图标样式
            position: 'right',
            fuzzySearch: true
          },
          {
            compKey: 'btnKey4',
            type: '',
            size: 'small',
            clickEvent: () => this.reset(this.leftTable.tableRef),
            text: '重置',
            name: 'reset',
            position: 'right'
          }
        ],
        // 动态组件-查询条件
        tableComponents:
          this.$ConfigCache.CacheConfig.cacheData[leftPageCode] &&
          this.$ConfigCache.CacheConfig.cacheData[leftPageCode].tableComponents.length > 0
            ? this.$ConfigCache.CacheConfig.cacheData[leftPageCode].tableComponents
            : [
              {
                compKey: 'compKey1',
                span: 12,
                labelName: '备件编号：',
                codeField: 'partNo',
                component: () => import('@/components/org/commonInput'),
                type: 'inputText',
                // change: this.getCompValue,
                // changed: this.getCompValue,
                isMust: true
              },
              {
                compKey: 'compKey2',
                span: 12,
                labelName: '备件名称：',
                codeField: 'partName',
                component: () => import('@/components/org/commonInput'),
                type: 'inputText',
                isMust: true
              },
              {
                compKey: 'compKey3',
                span: 12,
                labelName: '缺件单号：',
                codeField: 'lackPartsCode',
                component: () => import('@/components/org/commonInput'),
                type: 'inputText',
                isMust: false
              },
              {
                compKey: 'compKey4',
                span: 12,
                labelName: '车牌号：',
                codeField: 'carLicense',
                component: () => import('@/components/org/commonInput'),
                type: 'inputText',
                isMust: false
              },
              {
                compKey: 'compKey5',
                span: 12,
                labelName: '关联单号：',
                codeField: 'associationNo',
                component: () => import('@/components/org/commonInput'),
                type: 'inputText',
                isMust: false
              },
              {
                compKey: 'compKey6',
                span: 12,
                labelName: '登记人员：',
                codeField: 'registerPerson',
                component: () => import('@/components/org/commonInput'),
                type: 'inputText',
                isMust: false
              },
              {
                compKey: 'compKey7',
                span: 12,
                labelName: '登记日期：',
                codeField: 'beginDate,endDate',
                component: () => import('@/components/org/datePicker/datePicker'),
                dateType: 'daterange',
                // dataToObject: { timer: true,presentTime:true },
                // type: 'twoDatePicker',
                // hhmmss: true, // 默认有时分秒
                // format: 'yyyy-MM-dd',
                // dateOptionsType: '0',
                isMul: false,
                isMust: false
              },
              {
                compKey: 'compKey8',
                span: 12,
                labelName: '紧急度',
                codeField: 'urgency',
                component: () => import('@/components/org/LookupValue'),
                oFields: 'statusId,statusText',
                options: [
                  { statusId: '0', statusText: '全部' },
                  { statusId: '1', statusText: '一般' },
                  { statusId: '2', statusText: '紧急' }
                ],
                type: 'dropdownList',
                isMul: false,
                isMust: false
              }
            ],
        // 动态生成网格列
        tableCols:
          this.$ConfigCache.CacheConfig.cacheData[leftPageCode] &&
          this.$ConfigCache.CacheConfig.cacheData[leftPageCode].tableCols.length > 0
            ? this.$ConfigCache.CacheConfig.cacheData[leftPageCode].tableCols
            : [
              {
                prop: 'partNo',
                label: '备件编码',
                width: null,
                align: 'center'
              },
              {
                prop: 'partName',
                label: '备件名称',
                width: null,
                align: 'center'
              },
              {
                prop: 'accountQty',
                label: '库存数量',
                width: null,
                align: 'center'
              },
              {
                prop: 'usableStockQty',
                label: '可用库存',
                width: null,
                // isslot:true,
                align: 'center'
              },
              // { prop: "lookupTypeName", label: "值列表名称", width: null, align: "center", isComponent: true,
              //   comps: [
              //     {
              //       compKey: "propKey1",
              //       isShowLabel: false,
              //       codeField: "lookupTypeName",
              //       clickEvent: () => null,
              //       change: this.getCompValue,
              //       changed: this.getCompValue,
              //       component: () => import("@/components/org/commonInput")
              //     }
              //   ]
              // },
              // { prop: "isEnable", label: "启用状态", width: null, align: "center", isComponent: true,
              //   comps: [
              //     {
              //       compKey: "propKey1",
              //       isShowLabel: false,
              //       codeField: "isEnable",
              //       clickEvent: () => null,
              //       component: () => import("@/components/org/isEnable/isEnableText")
              //     }
              //   ]
              // },
              // {
              //   prop: "isSystem",
              //   label: "是否内置",
              //   width: null,
              //   align: "center",
              //   isComponent: true,
              //   comps: [
              //     {
              //       compKey: "propKey1",
              //       isMul: false,
              //       isShowLabel: false,
              //       codeField: "isSystem",
              //       clickEvent: () => null,
              //       component: () => import("@/components/org/isGlobalShow")
              //     }
              //   ]
              // },
              {
                prop: 'updateControlId',
                label: '并发控制',
                width: null,
                align: 'center',
                hidden: true
              }
            ],
        // 表单查询数据
        formField: this.$utils.getFormField(this, {
          partNo: '',
          partName: '',
          lackPartsCode: '',
          carLicense: '',
          associationNo: '',
          registerPerson: '',
          // registerDate: '',
          'beginDate,endDate': '',
          beginDate: '',
          endDate: '',
          registerDateEnd: '',
          urgency: ''
        }, this.$ConfigCache.CacheConfig.cacheData[leftPageCode]),
        // 回调方法对象
        callbackObj: {
          // 网格点击回调事件
          onRowClick: (currentRow) => {
            this.onLeftRowClick(currentRow)
          }
        }
      },

      // 右网格
      rightTable: {
        // 网格Ref
        tableRef: 'rightTableRef',
        // 网格Key
        oneTableKey: 'rightTable',
        // 网格查询API配置对象
        apiConfig: orgApis.shortageCaseClosedRightQuery,
        // 动态组件-按钮
        tableButtons: [
          {
            compKey: 'btnKey1',
            type: 'primary',
            size: 'small',
            clickEvent: () => this.query(this.rightTable.tableRef),
            text: '查询',
            name: 'search',
            position: 'right'
          },
          {
            compKey: 'btnKey3',
            type: '',
            size: 'small',
            clickEvent: () => this.reset(this.rightTable.tableRef),
            text: '重置',
            name: 'reset',
            position: 'right'
          },
          {
            compKey: 'btnKey3',
            type: '',
            size: 'small',
            disabled: false,
            parentFileds: 'disabled:table',
            clickEvent: () => this.save(),
            text: '分配',
            name: 'batchSubmit',
            position: 'left'
          }
        ],
        // 动态组件-查询条件
        tableComponents:
          this.$ConfigCache.CacheConfig.cacheData[rightPageCode] &&
          this.$ConfigCache.CacheConfig.cacheData[rightPageCode].tableComponents.length > 0
            ? this.$ConfigCache.CacheConfig.cacheData[rightPageCode].tableComponents
            : [
              // 显示组件
              // {
              //   compKey: "compKey0",
              //   span: 12,
              //   labelName: "值列表编码",
              //   codeField: "lookupTypeCode",
              //   isRequire: true,
              //   disabled: true,
              //   component: () => import("@/components/org/commonInput"),
              //   type: "inputText",
              //   isMust: true
              // },
              {
                compKey: 'compKey1',
                span: 12,
                labelName: '缺件单号：',
                codeField: 'lackPartsCode',
                component: () => import('@/components/org/commonInput'),
                type: 'inputText',
                isMust: true
              },
              {
                compKey: 'compKey2',
                span: 12,
                labelName: '车牌号：',
                codeField: 'carLicense',
                component: () => import('@/components/org/commonInput'),
                type: 'inputText',
                isMust: true
              },
              {
                compKey: 'compKey3',
                span: 12,
                labelName: '关联单号：',
                codeField: 'associationNo',
                component: () => import('@/components/org/commonInput'),
                type: 'inputText',
                isMust: false
              },
              {
                compKey: 'compKey4',
                span: 12,
                labelName: '登记人员：',
                codeField: 'registerPerson',
                component: () => import('@/components/org/commonInput'),
                type: 'inputText',
                isMust: false
              },
              {
                compKey: 'compKey5',
                span: 12,
                labelName: '登记日期：',
                codeField: 'beginDate,endDate',
                component: () => import('@/components/org/datePicker/datePicker'),
                dateType: 'daterange',
                // dataToObject: { timer: true,presentTime:true },
                // type: 'twoDatePicker',
                // hhmmss: true, // 默认有时分秒
                // format: 'yyyy-MM-dd',
                // dateOptionsType: '0',
                isMul: false,
                isMust: false
              },
              {
                compKey: 'compKey8',
                span: 12,
                labelName: '紧急度',
                codeField: 'urgency',
                component: () => import('@/components/org/LookupValue'),
                oFields: 'statusId,statusText',
                options: [
                  { statusId: '0', statusText: '全部' },
                  { statusId: '1', statusText: '一般' },
                  { statusId: '2', statusText: '紧急' }
                ],
                type: 'dropdownList',
                isMul: false,
                isMust: false
              }
            ],
        // 动态生成网格列
        tableCols:
          this.$ConfigCache.CacheConfig.cacheData[rightPageCode] &&
          this.$ConfigCache.CacheConfig.cacheData[rightPageCode].tableCols.length > 0
            ? this.$ConfigCache.CacheConfig.cacheData[rightPageCode].tableCols
            : [
              {
                prop: 'lackPartsCode',
                label: '缺件单号',
                width: null,
                align: 'center'
              },
              {
                prop: 'customerName',
                label: '客户姓名',
                width: null,
                align: 'center'
              },
              {
                prop: 'partNo',
                label: '备件编码',
                width: null,
                align: 'center'
              },
              {
                prop: 'partName',
                label: '备件名称',
                width: null,
                align: 'center'
              },
              {
                prop: 'lackQty',
                label: '缺件数量',
                width: null,
                // isSlot:true,
                align: 'center'
              },
              {
                prop: 'assignQty',
                label: '分配数量+',
                width: null,
                isComponent: true,
                isSlot: true,
                align: 'center',
                comps: [
                  {
                    compKey: 'assignQty',
                    codeField: 'assignQty',
                    component: () => import('@/components/org/commonInput')
                  }
                ]
              },
              {
                prop: 'carLicense',
                label: '车牌号',
                width: null,
                align: 'center'
              },
              {
                prop: 'vin',
                label: 'VIN码',
                width: null,
                align: 'center'
              },
              {
                prop: 'urgencyCn',
                label: '紧急度',
                width: null,
                align: 'center'
              },
              {
                prop: 'registerPerson',
                label: '登记人员',
                width: null,
                align: 'center'
              },
              {
                prop: 'registerDate',
                label: '登记日期',
                width: null,
                align: 'center'
              },
              {
                prop: 'associationNo',
                label: '关联单号',
                width: null,
                align: 'center'
              },
              {
                prop: 'associationTypeCn',
                label: '关联类型',
                width: null,
                align: 'center'
              },
              {
                prop: 'expectedDeliveryDate',
                label: '希望到货日期',
                width: null,
                align: 'center'
              },
              // { prop: "isEnable", label: "启用状态", width: null, align: "center", isComponent: true,
              //   comps: [
              //     {
              //       compKey: "propKey1",
              //       isShowLabel: false,
              //       codeField: "isEnable",
              //       clickEvent: () => null,
              //       component: () => import("@/components/org/isEnable/isEnableText")
              //     }
              //   ]
              // },
              {
                prop: 'updateControlId',
                label: '并发控制',
                width: 0,
                align: 'center',
                hidden: true
              },
              {
                prop: 'lackPartsId',
                label: '主键id',
                width: 0,
                align: 'center',
                hidden: true
              }
            ],
        // 表单数据
        formField: this.$utils.getFormField(this, {
          lackPartsCode: '',
          carLicense: '',
          associationNo: '',
          registerPerson: '',
          'beginDate,endDate': '',
          beginDate: '',
          endDate: '',
          urgency: ''
        }, this.$ConfigCache.CacheConfig.cacheData[rightPageCode]),
        // 排除表单查询条件
        unFormField: {
          lookupValueCode: '',
          lookupValueName: '',
          isEnable: '',
          lookupTypeName: '',
          dlrId: 'HOST',
          updateControlId: '',
          column1: '',
          // index:'',
          uid: ''
        },
        // 回调方法对象
        callbackObj: {
          // 网格点击回调事件
          onRowClick: (currentRow) => {
            this.onRightRowClick(currentRow)
          },
          // 手动勾选网格时，拿到勾选网格的数据
          onCheckSelect: (selection, row) => {
            // console.log(selection, row,'111')
            this.selectiondata = selection
          },
          onCheckSelectChange: (selection) => {
            // this.onCheckSelectChange1(selection)
          }
        }
      }
    }
  },
  mounted() {
    // 列表查询
    this.query(this.rightTable.tableRef)
    this.queryTable(1)
    //  this.$refs['rightTableRef'].list=[
    //   {lackPartsId:'1',updateControlId:'1',assignQty:'1'}
    // ]
  },
  methods: {
    numChange(val, row, col) {
      const panter = /c|(^[1-9][0-9]*$)/
      if (!panter.test(val)) {
        row[col['prop']] = val.slice(0, -1)
        if (val) { return this.$message('请输入正确的领用数量！') }
      }
      if (lackQty(val) > assignQty(row['assignQty'])) {
        row[col['prop']] = val.slice(0, -1)
        return this.$message('领用数量应小于库存数量!')
      }
    },

    // 左边网格行点击
    onLeftRowClick(currentRow) {
      // 复制对象 1(默认):创建、2:清空、3:不操作
      if (currentRow) {
        this.$utils.deepClone(this.rightTable.formField, currentRow, '3')
      }
      this.resetRight()
      this.query(this.rightTable.tableRef, false)
    },
    // 右边网格行点击
    onRightRowClick(currentRow) {
      // 复制对象 1(默认):创建、2:清空、3:不操作
      // this.$utils.deepClone(this.rightTable.formField, currentRow, '3')
      console.log(currentRow, 'currentRow')
    },
    // 重置右网格查询条件
    resetRight(tableRef) {
      // 复制对象 1(默认):创建、2:清空、3:不操作
      this.$utils.deepClone(this.rightTable.formField, this.rightTable.unFormField, '3')
    },
    // 分配
    save() {
      const that = this
      const infoQue = []
      this.selectiondata.forEach(function(val, index) {
        infoQue.push({
          lackPartsDId: val.lackPartsDId,
          lackPartsId: val.lackPartsId,
          assignQty: val.assignQty
        })
      })
      console.log(111, infoQue)
      const queryObj = {
        apiConfig: orgApis.shortageCaseClosedRightFenpei,
        // 条件/实体参数（变量），根据typeParam中的定义配置
        variables: {
          // 当前中台使用的名称有dataInfo、info，具体查看API文档
          dataInfo: infoQue
        }
      }
      // 转换了中台请求格式数据
      var paramD = that.$getParams(queryObj)
      // 调用中台API方法（可复用）
      that.$requestAPI(paramD).then(response => {
        if (response.result === '0') {
          return
        }
        var getResult = response
        if (getResult.result === '1') {
          that.$message({
            message: '分配成功',
            type: 'success',
            duration: 2000
          })
          // 重置表单
          // that.resetRight(tableRef)
          this.$refs['leftTableRef'].queryTable()
          for (const attr in this.rightTable.formField) {
            this.rightTable.formField[attr] = ''
          }
          this.rightTable.oneTableKey = this.$utils.generateId()
          // 重新加载
          that.onLeftRowClick(null)
        } else {
          that.$message({
            message: getResult.msg,
            type: 'warning',
            duration: 2000
          })
        }
      })
      // }
    },
    // 获取值
    getCompValue(val, index, row) {
      console.info(val)
      console.info(index)
      console.info(row)
    }
  }
}
</script>
